<template>
	<div class="login">
		<div class="logo"><img src="" alt=""></div>
		<div class="form">
			<label><input type="text" placeholder="请输入用户名" v-model="username"></label>
			<label>
				<input :type="isLook ? 'text' : 'password'" placeholder="请输入登录密码" v-model="password">
				<i class="iconfont icon-Close" v-show="!isLook" @click='isLook = !isLook'></i>
				<i class="iconfont icon-yanjing" v-show="isLook" @click='isLook = !isLook'></i>
			</label>
			<!-- <label class="imgCode">
				<input type="text" v-model="imgCode">
				<img :src="imgUrl" alt="" @click='replaceCode'>
			</label> -->
			<div class="btn">
				<router-link to='login/forgetPass'>忘记密码？</router-link>
			</div>
			<input type="button" :disabled='!disabled' :class='{active:disabled}' @click='loginEv' class="submit" value="登录">
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { login, test } from '../../config/getData.js'

test()

export default {
	data(){
		return {
			isLook: false,
			username:'',
			password:'',
			imgCode:'',
			imgUrl:'',
            isSendLogin: false
		}
	},
	computed: {
		...mapState([
			'userInfo'
		]),
		disabled(){
            if(this.isSendLogin === true) return false;
			return !!this.username && !!this.password
		}
	},
	methods: {
		...mapActions([
			'setUserInfo'
		]),
		replaceCode(){
			this.imgUrl = ''
			setTimeout( () => this.imgUrl = sessionStorage.imgCode,100)
		},
        loginEv(){
			this.isSendLogin = true;
			setTimeout( () => this.isSendLogin = false,2000)

			login(this.username, this.password).then( res => {
				this.$router.push('/')
				this.setUserInfo( res.data )
				console.log(this.userInfo)
			})
        }
	}
}
</script>


<style lang="scss" scoped>
@import '../../assets/css/all';
input[type=text]:focus, input[type=password]:focus, textarea:focus { box-shadow: 0 0 0 1000px white inset;color:#333;}

.login{@include screen;background-color: white;z-index: 15;
	.logo{@include wh(76px,88px); display: block;margin:90px auto 80px;background: url('../../assets/images/logo.png') no-repeat 0 0/100% 100%;}
	.form{width:90%;margin:0 auto;padding-bottom:40px;
		.imgCode{position: relative;
			img{position: absolute;right:0;top:0;}
		}
		label{display: block;margin-top:10px;position: relative;
			input{border:none;border-bottom:1px solid $e6;width:100%;height: 16px;line-height: 16px;padding:15px 0;background-color: transparent;font-size:16px;}
			.iconfont{position: absolute;right:0;top:50%;transform: translateY(-50%);padding:10px;}
		}
		.btn{display: flex;justify-content: space-between;margin:28px 0 37px;}
	}
}
</style>

